<template>
  <div>
    <button @click="fn">按钮</button>
    <p>{{ obj }}</p>
    <p>{{ arr }}</p>
    <p>{{ b }}</p>
  </div>
</template>

<script>
// 数据是响应式的 数据变了视图会跟着变
// 1. 数据如果想是响应式，必须在data中初始化 后添加的数据不是响应式的
// 数据变了，视图就会跟着变，vue只有看到响应式的数据，才会更新一次视图\

// 1. 给对象添加新的属性 不是响应式（修改原有的属性是响应式的）
// 2. 通过索引给数组修改或添加数据项，也不是响应式

export default {
  created() {
    this.b = 2;
  },
  data() {
    return {
      a: 1,
      obj: {
        name: "张三",
      },
      arr: ["a", "b", "c"],
    };
  },
  methods: {
    fn() {
      //以后如果大家发现我们修改了数据，但是视图没有效果，这个时候就需要看一下是不是做了如下两件事情：
      // 1. 是不是在给对象新添加属性
      // 2. 是不是在数组通过索引操作
      // 需要用到一个叫$set
      // this.$set(this.对象名字,'key','value')//this.对象名.key = value
      // this.$set(this.数组名字,index,value)//this.数组[index] = value

      //   this.a = 2;
      //   this.obj.age = 20;
      //   this.arr[3] = "d";
      //   this.b = 3;
      //   this.obj.name = "李四";
      //   this.arr[0] = "m";

      // this.obj.age = 20;//不是响应式
      //   this.$set(this.obj, "age", 20); //是响应式的 对于新添加的属性，要用vue自己的api $set就可以了
      this.$set(this.arr, 0, "m");
      //   $set 强制更新
    },
  },
};
</script>

<style scoped></style>
